<template>
  <div class="blogsitem">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-size:18px" :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:18px">博客</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="classify">
      <ul class="classify-ul">
        <li
          v-for="item in classifyData"
          @click="blogTitleClick(item.id,item.children)"
          :key="item.id"
          :class="{'classify-li':true,'classify-li1':blogTitleId==item.id}"
        >
          <a class="classify-a" href="javascript:;">{{item.title}}</a>
        </li>
      </ul>
      <div class="skill">
        <ul class="skill-ul">
          <li @click="blogItemTitleClick(item.id)" v-for="item in blogItemTitleShow" :key="item.id" class="skill-li">
            <a :class="{'skill-a':true}" href="javascript:;">{{item.title}}</a>
          </li>
        </ul>
      </div>
      <div @click="particulars(item.id)" v-for="(item,index) in articlesList" :key="index" class="documents">
        <div class="documents-div1">
          <h3 class="div1-h3">{{item.title}}</h3>
          <p class="div1-p">{{item.description}}</p>
          <p>
            {{item.nickname}}
            <i class="div1-i">|</i>
            发布时间：{{item.create_time}}
          </p>
        </div>
        <div class="documents-div2">
          <a href="#">{{item.label_type}}</a>
          <img :src="item.imgurl" alt />
        </div>
      </div>
      <el-pagination
        v-if="dataCount!==0"
        @current-change="pageChange"
        :page-size="pageData.size"
        :total="count"
        background
        layout="total, prev, pager, next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getNavBar, getArticlesByPSid } from '../../../network/blogs'
export default {
  name: 'BlogsItem',
  data() {
    return {
      //分类数据
      classifyData: [],
      //获取子类数据
      blogItemTitleShow: [],
      //首页博客数据
      articlesList: [],
      count: 0,
      pageData: {
        total: 0,
        page: 1,
        size: 10
      },
      // 绑定父菜单id
      blogTitleId: 1,
      // 绑定子菜单id
      blogItemTitleId: 0,
      //获取页面的数据条数，
      dataCount: 0
    }
  },
  created() {
    this.getArticlesByPSid()
    this.getNavBar()
  },
  mounted() {},

  methods: {
    //点击博客跳转页面
    particulars(id) {
      this.$router.push({ path: `/particular/${id}` })
    },
    //获取博客全部数据
    getArticlesByPSid() {
      getArticlesByPSid(this.blogTitleId, this.blogItemTitleId, this.pageData.page, this.pageData.size).then(res => {
        if (res.code === 200) {
          this.articlesList = res.data.rows
          this.count = res.data.count
          this.dataCount = res.data.count
        }
      })
    },
    //下一页更新数据
    pageChange(newPage) {
      this.pageData.page = newPage
      this.getArticlesByPSid()
      document.documentElement.scrollTop = document.body.offsetHeight
    },
    //获取分类数据
    getNavBar() {
      getNavBar().then(res => {
        if (res.code === 200) {
          this.classifyData = res.data
          this.blogItemTitleShow = res.data[0].children
        }
      })
    },
    //获取父类数据
    blogTitleClick(id, children) {
      if (this.blogItemTitleId !== 0) {
        this.blogItemTitleId = 0
        this.blogItemTitleShow = children
        this.blogTitleId = id
        this.getArticlesByPSid()
      } else {
        this.blogItemTitleShow = children
        this.blogTitleId = id
        this.getArticlesByPSid()
      }
    },
    //获取子类数据
    blogItemTitleClick(id) {
      this.blogItemTitleId = id
      this.getArticlesByPSid()
    }
  }
}
</script>

<style>
.el-pagination {
  padding-bottom: 40px;
  text-align: center;
}
.blogsitem {
  width: 100%;
  padding: 0 65px;
  padding-top: 80px;
  background-color: #dce2da;
  box-sizing: border-box;
}
.classify {
  width: 80%;

  background-color: #dce2da;
  margin: 0 auto;
}
.classify-ul {
  display: flex;
  justify-content: space-between;
}

.classify-ul .classify-li:nth-child(2n) {
  margin-top: 50px;
}

.classify-a {
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
  border-radius: 5px;
  color: #000;
  padding: 5px 15px;
  border: 2px solid #4406ef;
  border-radius: 10px;
  transition: all 0.5s;
}
.classify-li1 a {
  color: #f77280 !important;
}
.skill-a {
  display: block;
  margin-bottom: 30px;
  color: #000;
  transition: all 0.5s;
}
.classify-a:hover,
.skill-a:hover {
  color: #f77280;
}

.skill {
  width: 80%;

  margin: 0 auto;
  margin-top: 40px;
}
.skill-ul {
  display: flex;
}
.skill-li {
  margin-right: 40px;
}
.skill-li a {
  padding: 5px 10px;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid #000;
  border-radius: 10px;
  color: #000;
}
.documents {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 200px;
  background-color: #f5f6f4;
  border-radius: 20px;
  margin-top: 40px;
  box-shadow: 0px 0px 10px 10px rgba(100, 100, 100, 0.8);
  cursor: pointer;
  margin-bottom: 40px;
}
.documents-div1 {
  margin-left: 50px;
}
.div1-h3 {
  font-size: 25px;
  font-weight: 700;
  margin-top: 25px;
  transition: all 0.5s;
}
.div1-h3:hover {
  color: #f67280;
}
.div1-p {
  margin-left: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.div1-i {
  display: inline-block;
  color: #f67280;
  padding: 0 15px;
}
.documents-div2 {
  position: relative;
  margin-top: 30px;
}
.documents-div2 a {
  position: absolute;
  top: 0;
  left: -70px;
  padding: 5px 20px;
  border-radius: 12px;
  background-color: #f67280;
  color: #fff;
  font-weight: 700;
  vertical-align: top;
  transition: all 0.5s;
}
.documents-div2 a:hover {
  background-color: #506172;
}
.documents-div2 img {
  width: 300px;
  height: 150px;
  border-radius: 15px;
  margin-right: 50px;
  margin-left: 50px;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
}
</style>